| How to Create 3D Flipping Animation on a Box/Card with CSS | 您所在的位置：网站首页 › flipping book animation 3d using css3 and javascript › How to Create 3D Flipping Animation on a Box/Card with CSS |
|
A lot of funny things can be done with CSS animations. One impressive CSS effect is the flip effect when there's content on both the front and the back sides of a given container. This article will show you how to create: Horizontal and Vertical Flipping Animation Book Flipping Animation Flipping Cards with Buttons Flipping Lists Flipping Menus Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) Horizontal and Vertical Flipping AnimationTo have a flipping effect, some properties are essential to set. Let's discuss them below: Use the perspective property to apply a perspective transform to the element and its content (perspective: 1000). Set the transition property to "transform 0.2s". You can define your preferred duration for the transition. To define that the children of the elements will be positioned in 3D effect, use the transform-style property set to "preserve-3d". On :hover set the transform property. Use "rotateY(180deg)" for horizontal flipping effect, and "rotateX(180deg)" for vertical. Set the backface-visibility to "hidden" so that the back of the flipped elements won't be displayed during the animation. Example of creating a horizontal flipping effect: Title of the document .box { background-color: transparent; width: 220px; height: 300px; border: 1px solid #eeeeee; perspective: 1000px; } .box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.5s; transform-style: preserve-3d; } .box:hover .box-inner { transform: rotateY(180deg); } .box-front, .box-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .box-front { background-color: #cccccc; color: #111111; } .box-back { background-color: #8ebf42; color: #eeeeee; transform: rotateY(180deg); } 3D Flip Box (Horizontal) Hover over the box to see the effect: Front Side Back Side Try it Yourself » ResultHover over the box to see the effect: Front Side Back Side Example of creating a vertical flipping effect: Title of the document .box { background-color: transparent; width: 220px; height: 300px; border: 1px solid #eeeeee; perspective: 1000px; } .box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.4s; transform-style: preserve-3d; } .box:hover .box-inner { transform: rotateX(180deg); } .box-front, .box-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .box-front { background-color: #cccccc; color: #111111; } .box-back { background-color: #8ebf42; color: #eeeeee; transform: rotateX(180deg); } 3D Flip Box (Vertical) Hover over the box to see the effect: Front Side Back Side Try it Yourself » It is also possible to flip around other axes. Use transform: rotateZ to achieve the effect. Book Flipping AnimationSee another example with a book flipping effect. Here the transform-origin is set to 0 to have the book flip effect. Example of creating a book flipping animation: Title of the document .floatL { float: left; } .floatR { float: right; } .clear { clear: both; line-height: 0; font-size: 0; display: block; } p { line-height: 10px; color: #333; margin: 5px 0; } #content { padding: 10px; background: #eeeeee; width: 400px; } .flip-container { perspective: 1000; width: 200px; } .flipper { transition: 0.8s; transform-style: preserve-3d; position: relative; height: 100px; } .front, .back { width: 200px; height: 100px; position: absolute; left: 0; top: 0; backface-visibility: hidden; color: #ffffff; font-weight: bold; font-size: 22px; line-height: 100px; text-align: center; } .back { transform: rotateY(180deg); background: #8ebf42; } .front { z-index: 2; background: #1c87c9; } .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(-180deg); } .flip-container p { margin: 10px 0; text-align: center; } .bookflip-container .flipper { transform-origin: 0; } 3D Flip Box (Book Flip) Hover over the box to see the effect: The front face The back face Book Flip Try it Yourself » Flipping Cards with ButtonsSee another example where cards have buttons when flipped. It’s easy to set your preferred links because the tag is used. Example of creating flipping cards with buttons: Title of the document body { color: #666; font-weight: normal; margin: 0; padding: 0; background: #eeeeee; } h2 { background: #666; color: #fff; text-align: center; margin: 0 0 5% 0; padding: 0.5em; } .cardBox { float: left; font-size: 1.2em; margin: 1% 0 0 1%; perspective: 800px; transition: all 0.4s ease 0s; width: 20%; } .cardBox:hover .card { transform: rotateY(180deg); } .card { background: #666666; cursor: pointer; height: 250px; transform-style: preserve-3d; transition: transform 0.5s ease 0s; width: 100%; } .card p { margin-bottom: 1.8em; } .card .front, .card .back { backface-visibility: hidden; box-sizing: border-box; color: white; display: block; font-size: 1.2em; height: 100%; padding: 0.8em 0.7em; position: absolute; text-align: center; width: 100%; } .card .front strong { background: #fff; border-radius: 100%; color: #222; font-size: 1.5em; line-height: 30px; padding: 0 7px 4px 6px; } .card .back { transform: rotateY( 180deg); } .card .back a { padding: 0.3em 0.5em; background: #333; color: #fff; text-decoration: none; border-radius: 1px; font-size: 0.9em; transition: all 0.2s ease 0s; } .card .back a:hover { background: #fff; color: #333; text-shadow: 0 0 1px #333; } .cardBox:nth-child(1) .card .back { background: #ffcc00; } .cardBox:nth-child(2) .card .back { background: #1c87c9; } .cardBox:nth-child(3) .card .back { background: #ff6347; } .cardBox:nth-child(4) .card .back { background: #8ebf42; } .cardBox:nth-child(2) .card { -webkit-animation: giro 1.5s 1; animation: giro 1.5s 1; } .cardBox:nth-child(3) .card { -webkit-animation: giro 2s 1; animation: giro 2s 1; } .cardBox:nth-child(4) .card { -webkit-animation: giro 2.5s 1; animation: giro 2.5s 1; } @-webkit-keyframes giro { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } } @keyframes giro { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } } @media screen and (max-width: 767px) { .cardBox { margin-left: 2.8%; margin-top: 3%; width: 46%; } .card { height: 285px; } .cardBox:last-child { margin-bottom: 3%; } } @media screen and (max-width: 480px) { .cardBox { width: 94.5%; } .card { height: 260px; } } Responsive Flip Cards Card One Hover to flip ↻ Back Side One Content in card one Button 1 Card Two Hover to flip ↻ Back Side Two Content in card two Button 2 Card Three Hover to flip ↻ Back Side Three Content in card three Button 3 Card Four Hover to flip ↻ Back Side Four Content in card four Button 4 Try it Yourself » Flipping ListsIt is also possible to add flipping effects to your lists ( elements) and have an amazing design for your lists. Here, see an example of flipping hexagon lists, which also has a “Read more” button on the backside. Example of creating flipping hexagon lists: Title of the document Title of the document #hexagons { max-width: 893px; margin: 1em auto 16em; font: normal 16px/20px Helvetica, Arial, sans-serif; padding-top: 4em; position: relative; } #categories { overflow: hidden; width: 100%; } .clr:after { content: ""; display: block; clear: both; } #categories li { position: relative; list-style-type: none; width: 32.33333333%;/* = (100- 3) / 3 */ padding-bottom: 37.33641263%;/* = width /0.866 */ float: left; overflow: hidden; visibility: hidden; margin-left: 0.5%; margin-right: 0.5%; -webkit-transform: rotate(-60deg) skewY(30deg); -ms-transform: rotate(-60deg) skewY(30deg); transform: rotate(-60deg) skewY(30deg); cursor: pointer; } @media (min-width: 768px) { #categories li:nth-child(5n+4) { margin-left: 1%; } #categories li:nth-child(5n+4), #categories li:nth-child(5n+5) { margin-top: -8.083333333%; /* = w / 4 */ margin-bottom: -8.083333333%; /* = w / 4 */ -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } #categories li:nth-child(5n+6) { clear: left; transform: translateX(0) rotate(-60deg) skewY(30deg); } #categories li:nth-child(5n+4):last-child, #categories li:nth-child(5n+5):last-child { margin-bottom: 0%; } } @media( max-width: 767px) { #categories li { width: 48.75%;/* = (100 -2.5) / 2 */ padding-bottom: 56.29330254%;/* = width /0.866 */ } #categories li:nth-child(3n+3) { margin-left: 25.5%; clear: both; margin-top: -12.1875%;/* = w / 4 */ margin-bottom: -12.1875%;/* = w / 4 */ } #categories li:nth-child(3n+2) { float: right; } #categories li:nth-child(3n+3):last-child { margin-bottom: 0%; } #categories li:nth-child(3n+4) { clear: left; transform: translateX(0) rotate(-60deg) skewY(30deg); } } #categories li * { position: absolute; visibility: visible; overflow: hidden; } #categories li>div { width: 100%; height: 100%; text-align: center; color: #fff; overflow: hidden; -webkit-transform: skewY(-30deg) rotate(60deg); -ms-transform: skewY(-30deg) rotate(60deg); transform: skewY(-30deg) rotate(60deg); -webkit-backface-visibility: hidden; } /* HEX CONTENT */ #categories li img { left: 50%; top: 50%; width: auto; margin: 0 auto; transform: translate(-50%, -50%); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } #categories li .flip-content { top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; text-align: center; width: 100%; padding: 20px 3px; } #categories li .front .flip-content { font-size: 21px; } #categories li .flip-content * { position: static; } #categories li .flip-content { font-size: 19px; line-height: 1.2; } #categories li .front { background-repeat: repeat; background-position: center; } #categories li .flip-content p { color: #666666; padding-bottom: 10px; } #categories li .flip-content.lg { font-size: 27px; } #categories li .flip-content.md { font-size: 24px; } #categories li .flip-content.title-xs { font-size: 38px; } #categories li .front .flip-content, #categories li .front .flip-content p { color: #fff; } #categories li .flip-content p:last-child { padding-bottom: 0; } #categories li .back .flip-content p a { background: #df5d53; display: inline-block; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; color: #fff; text-transform: uppercase; padding: 4px 6px 4px 11px; font-size: 12px; font-weight: 600; text-decoration: none; } #categories li .back .flip-content p a i { font-size: 21px; vertical-align: middle; padding-left: 3px; } @media (max-width: 1024px) { #news-month.style2 { overflow: hidden; } #hexagons { margin-bottom: 15em; } } @media (max-width: 991px) { #categories li .front .flip-content.title-xs { font-size: 29px; } #categories li .front .flip-content { font-size: 17px; } #categories li .flip-content.lg { font-size: 22px; } #categories li .flip-content.md { font-size: 18px; } #categories li .flip-content { font-size: 16px; } .initiative.style2 .initiative--title { font-size: 19px; } #hexagons { overflow: hidden; margin: 1em auto 0; padding-top: 3em; padding-bottom: 3em; } #categories { width: auto; padding: 0 12px; } #hexagons .el-bg.bg-11 { top: 996px; } #hexagons .el-bg.bg-12 { top: 1152px; } .page-template-our-impact .header { max-height: none; } } @media (max-width: 767px) { #categories li .front .flip-content.title-xs { font-size: 32px; } #categories li .front .flip-content { font-size: 23px; } #categories li .flip-content.lg { font-size: 27px; } #categories li .flip-content.md { font-size: 26px; } #categories li .flip-content { font-size: 23px; } #hexagons .el-bg.bg-14 { top: 1751px; } #categories li img { height: 100%; } .initiative.style2 a { padding-bottom: 20px; padding-top: 10px; } #news-month.style2 .news-figure { background-position: 0 0; padding: 20px 16px 20px; } .initiative.style2 { padding-top: 20px; padding-bottom: 20px; } .page-template-our-impact .header { background-position: -62px; } } @media (max-width: 560px) { #categories li .front .flip-content.title-xs { font-size: 22px; } #categories li .front .flip-content { font-size: 13px; } #categories li .flip-content.lg { font-size: 17px; } #categories li .flip-content.md { font-size: 16px; } #categories li .flip-content { font-size: 13px; } #categories { padding: 0 8px; } #categories li .back .flip-content p a { font-size: 11px; padding: 0px 6px 0px 11px; } #categories li .back .flip-content p a i { font-size: 15px; line-height: 1.5; } } @media( max-width: 375px) { .page-template-our-impact .header { background-position: -87px; } } @media (max-width: 320px) { #categories li .front .flip-content.title-xs { font-size: 19px; } #categories li .front .flip-content { font-size: 12px; } #categories li .flip-content.lg { font-size: 13px; } #categories li .flip-content.md { font-size: 12px; } #categories li .flip-content { font-size: 11px; } #categories li .flip-content p { padding-bottom: 5px; } .page-template-our-impact .header { background-position: -104px; } } /* Flip EFFECT */ .flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -ms-transform: perspective(1000px); -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; } /* UPDATED! flip the pane when hovered */ .flip-container:hover {} .flip-container:hover .back { transform: rotateY(0deg); } .flip-container:hover .front { transform: rotateY(180deg); } .flip-container, .front, .back { width: 100%; height: 100%; } /* flip speed goes here */ .flipper { width: 100%; height: 100%; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -ms-transition: 0.6s; -moz-transition: 0.6s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: relative!important; } /* hide back of pane during swap */ .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(0deg); -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -moz-transform: rotateY(0deg); -o-transition: 0.6s; -o-transform-style: preserve-3d; -o-transform: rotateY(0deg); -ms-transition: 0.6s; -ms-transform-style: preserve-3d; -ms-transform: rotateY(0deg); transition: 0.6s; transform-style: preserve-3d; transform: rotateY(0deg); position: absolute; top: 0; left: 0; } /* UPDATED! front pane, placed above back */ .front { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; } /* back, initially hidden pane */ .back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #eeeeee; } "Lorem Ipsum is simply dummy text of the printing and typesetting industry." read more "What is Lorem Ipsum?" "Lorem Ipsum is simply dummy text of the printing and typesetting industry." read more "Lorem Ipsum is simply dummy text of the printing and typesetting industry." read more "Lorem Ipsum is simply dummy text of the printing and typesetting industry." read more "Lorem Ipsum is simply dummy text of the printing and typesetting industry." read more Try it Yourself » Flipping MenusIn the following example, find how a flipping menu is created. Example of creating flipping menus: body { margin: 0; font: 14px Helvetica, Arial, serif; } .title { text-align: center; color: #333; font-size: 1.6em; } .flip-menu { margin: 30px 0 0; } .flip-item-wrap { width: 25%; height: auto; float: left; position: relative; -webkit-perspective: 800px; -moz-perspective: 800px; -ms-perspective: 800px; -o-perspective: 800px; perspective: 800px; } @media screen and (min-width: 1280px) { .flip-item-wrap { width: 16.6%; } } @media screen and (max-width: 979px) { .flip-item-wrap { width: 33.3%; } } @media screen and (max-width: 639px) { .flip-item-wrap { width: 50%; } } @media screen and (max-width: 379px) { .flip-item-wrap { width: 100%; } } .flip-item-wrap img { width: 100%; height: auto; display: block; margin: 0; } .flip-item-wrap input { display: none; } .flip-item-wrap .fake-image { visibility: hidden; } .flip-item { display: block; width: 100%; height: 100%; float: left; position: absolute; top: 0; left: 0; cursor: pointer; color: #fff; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; } .flip-item figure { display: block; position: absolute; width: 100%; height: 100%; margin: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .flip-item .back { width: 100%; display: block; margin: 0; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .flipper:checked + .flip-item { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-item-desc { background: rgba(0, 0, 0, 0.2); width: 90%; height: 90%; padding: 5%; position: absolute; top: 0; left: 0; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); overflow: hidden; } .flip-item-title { font-size: 1.5em; margin: 1em 0 0.8em; } Flip Menu. Clickable/Responsive/Pure CSS Lorem ipsum dolor Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus. Lorem ipsum dolor Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus. Lorem ipsum dolor Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus. Lorem ipsum dolor Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus. Lorem ipsum dolor Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus. Lorem ipsum dolor Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus. Try it Yourself » |
| CopyRight 2018-2019 实验室设备网 版权所有 |